<template>
  <div>
    <nav-bar title="材料管理"></nav-bar>
    <div class="maxinBox">
      <div>
        <van-search
          v-model="value"
          show-action
          placeholder="请输入材料名称/编号"
          @search="onSearch"
        >
        </van-search>
        <div class="illegalQuery">
          <van-row class="materialBox backgroundfff" style="padding: 0.9375rem;" v-for="(item, index) in materialList" :key="index">
            <van-col :span="24">
              <van-row>
                <van-col :span="12">{{item.materialName}}</van-col>
                <van-col :span="12" style="text-align: right;">
                  <van-button v-if="item.materialStatus" type="default" style="width: 4.375rem;" size="mini">库存正常</van-button>
                  <van-button v-else type="danger" style="width: 4.375rem;" size="mini">库存警告</van-button>
                </van-col>
              </van-row>
            </van-col>
            <van-col :span="24" class="materialContent" @click="materialDetails(item)">
              <van-row>
                <van-col :span="22" class="fontSize14">
                  <div>材料编号：{{item.materialNum}}</div>
                  <div>型号规格：{{item.materialModel}}</div>
                  <div>库存数量：{{item.number}}</div>
                  <div>品牌：{{item.materialBrand}}</div>
                </van-col>
                <van-col :span="2">
                  <van-icon style="line-height: 4.375rem;font-size: 1.25rem;" name="arrow" />
                </van-col>
              </van-row>
            </van-col>
            <van-col :span="24" style="padding: 0.625rem 0;text-align: center;">
              <van-row>
                <van-col :span="12">
                  <van-button type="warning" style="width: 80%;" size="small" @click="outbound(item)">出库</van-button>
                </van-col>
                <van-col :span="12">
                  <van-button type="info" style="width: 80%;" size="small" @click="outboundHistory(item)">出库记录</van-button>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        materialList: [
          {
            materialName: '一期工地建筑水泥',
            materialStatus: 1,
            materialNum: 'QR65292134P',
            materialModel: '325#',
            number: '453吨',
            materialBrand: '永固'
          },
          {
            materialName: '二期工地建筑水泥',
            materialStatus: 0,
            materialNum: 'QR34642134P',
            materialModel: '962#',
            number: '286吨',
            materialBrand: '永固'
          },
          {
            materialName: '三期工地建筑水泥',
            materialStatus: 1,
            materialNum: 'QR34647526P',
            materialModel: '425#',
            number: '654吨',
            materialBrand: '永固'
          }
        ]
      };
    },
    methods: {
      outbound(data) {
        this.$router.push({
          name: 'MaterialOutbound'
        })
      },
      outboundHistory(data) {
        this.$router.push({
          name: 'MaterialOutboundHistory'
        })
      },
      // 关键字搜索
      onSearch(val) {
        this.value = val
      },
      materialDetails(data) {
        this.$router.push({
          name: 'MaterialDetails'
        })
      }
    },
    mounted() {
    }
  }
</script>
<style lang="scss" scoped>
  .materialContent{
    border-top: 0.0625rem dashed #ccc;
    border-bottom: 0.0625rem dashed #ccc;
    padding: 0.625rem 0;
    margin-top: 0.625rem;
  }
  .materialBox {
    border-bottom: 0.0625rem solid #E5E5E5;
  }
</style>
